<template>
	<view class="home">
		<!-- <view class="top-list">
			<view class="list-box" @click="this.hzc = true">
				<view class="">活动类型<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
			<view class="list-box">
				<view class="">活动状态<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
			<view class="list-box">
				<view class="">活动区域<uni-icons type="bottom" size="14"></uni-icons></view>
			</view>
		</view> -->
		<!-- 遮罩 -->
<!-- 		<view class="xuanx" v-if="hzc == true">

			<view class="x-xiang">
				<view :class="{'ax':pding == index}" class="ann" v-for="(item,index) in 8" :key="index"
					@click="qhzz(index)">
					<view class="">魏豪</view>
				</view>
			</view>
			<view class="xsanniu" @click="this.hzc = false">
				<view class="fanhu">
					<view class="">返回</view>
				</view>
				<view class="wc" @click="this.hzc = false">
					<view class="">完成</view>
				</view>
			</view>
		</view> -->
		<!-- 遮罩结束 -->
		<view class="x-box" v-for="(item,index) in tasklist" :key="index">
			<view class="box-img">
				<image :src="item.imgs[0]" mode=""></image>
			</view>
			<view class="bt-title">
			{{item.title}}
			</view>
			<view class="sjsx">
				<view class="sj-box">
					<view class="zuo-s">
						<view class="tb">
							<image src="../../static/img/gy (11).png" mode=""></image>
						</view>
						<view class="">报名时间:</view>
					</view>
					<view class="sb">{{item.starttime}}—{{item.endtime}}</view>
				</view>
				<!-- 下 -->
				<view class="sj-box" style="margin-bottom: 0px;">
					<view class="zuo-s">
						<view class="tb">
							<image src="../../static/img/gy (12).png" mode=""></image>
						</view>
						<view class="">活动地址:</view>
					</view>
					<view class="sb">{{item.address}}</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="di-box">
				<view class="huise">{{item.joinnum}}人参加</view>
				<view class="xxaniu">
					<view class="">进入活动</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		request
	} from "@/request/index.js"
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		data() {
			return {
				pding: 0,
				hzc: false,
				tasklist:[],
				page: 1,
				num: 5,
				totalPages: 0,
			}
		},
		
		onLoad() {
			this.initPageData()
		},
		onPullDownRefresh() {
			uni.showLoading()
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			console.log(111)
			if (this.page > this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
		
			} else {
				this.page++
				this.initPageData()
			}
		},
		
		methods: {
			async initPageData() {
				let datas = {
					page: this.page,
					num: this.num
				}
		
				var res3 = await request({
					url: "GetMyJoinTask",
					data: datas
				});
				if (res3.code == 0) {
					if (this.page != 1) {
						this.tasklist = this.tasklist.concat(res3.data)
					} else {
						this.tasklist = res3.data
					}
					let total = res3.count
					this.totalPages = Math.ceil(total / this.num);
				}
			},
			
			
			qhzz(index) {
				this.pding = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		width: 100%;
		// height: calc(100vh);
		background: #F3F3F3;
		padding-bottom: 40rpx;
	}

	.top-list {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-box {
		height: 100%;
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	/* 遮罩 */
	.xuanx {
		position: fixed;
		top: 260rpx;
		width: 100%;
		height: calc(100vh);
		background: rgba(0, 0, 0, 0.2)
	}

	.x-xiang {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.ann {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		background: #F2F6FF;
		border-radius: 24rpx;
		padding: 10rpx 30rpx;
		color: #666666;
		font-size: 28rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}

	.ax {
		font-size: 28rpx;
		background: #0DC06E;
		color: white !important;
	}

	.xsanniu {
		border-top: 1px solid #EEEEEE;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wc {
		width: 436rpx;
		height: 80rpx;
		background: #0DC06E;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		color: white;
		font-size: 32rpx;
		justify-content: center;
	}

	.fanhu {
		width: 224rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 2rpx solid #0DC06E;
		display: flex;
		align-items: center;
		color: #0DC06E;
		justify-content: center;
	}

	.x-box {
		margin-top: 20rpx;
		width: 100%;
		// height: 832rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.box-img {
		width: 100%;
		height: 444rpx;
		overflow: hidden;
		border-radius: 10rpx;

		image {
			width: 100%;
			// height: 100%;
		}
	}

	.bt-title {
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 30rpx;
	}

	.sjsx {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
		border-bottom: 1px solid #EEEEEE;

	}

	.tb {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zuo-s {
		width: 25%;

		display: flex;
		margin-right: 10rpx;
	}

	.sj-box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sb {
		width: 75%;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.di-box {
		box-sizing: border-box;
		padding: 15rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.huise {
		font-size: 28rpx;
	}

	.huise {
		color: #999999;
	}

	.xxaniu {
		background: linear-gradient(90deg, #0DC06E 0%, #0DB5C0 100%);
		border-radius: 40rpx;
		padding: 18rpx 30rpx;
		font-size: 28rpx;
		color: white;
	}
</style>